<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库内管理</el-breadcrumb-item>
      <el-breadcrumb-item>盘点</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-main>
        <!-- 查询表单 -->
        <el-form
          :inline="true"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-form-item prop="locatorcode">
            <el-input
              v-model="searchForm.locatorcode"
              placeholder="货位编码"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="locatorname">
            <el-input
              v-model="searchForm.locatorname"
              placeholder="货位名称"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh" @click="onReset"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="onInventory"
              >盘点</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="onInventoryAll"
              >盘点全部</el-button
            >
          </el-form-item>
        </el-form>
        <el-input v-model="input" placeholder="请输入内容"></el-input
        ><br /><br />
        <!--上架信息表-->
        <el-table
          ref="inventoryTable"
          :data="inventoryData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="locatorcode" label="货位编码" sortable>
          </el-table-column>
          <el-table-column prop="locatorname" label="货位名称" sortable>
          </el-table-column>
          <el-table-column prop="locatortype" label="货位类型" sortable>
          </el-table-column>
          <el-table-column prop="locatorstate" label="货位状态" sortable>
          </el-table-column>
          <el-table-column prop="locator" label="所属仓库" sortable>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <el-dialog title="盘点明细" :visible.sync="dialogVisible">
          <!-- 模态框表单 -->
          <div style="margin-left: 130px">
            <el-form :model="dialogform" :rules="rules" ref="dialogform">
              <el-form-item
                label="盘点单号"
                :label-width="formLabelWidth"
                prop="inventoryno"
                aria-readonly="true"
              >
                <el-input
                  v-model="dialogform.inventoryno"
                  style="width: 250px"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="货位编码"
                :label-width="formLabelWidth"
                prop="locatorcode"
              >
                <el-select
                  v-model="dialogform.locatorcode"
                  placeholder="请输入货位编码"
                  style="width: 250px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="商品编码"
                :label-width="formLabelWidth"
                prop="commoditybar"
              >
                <el-select
                  v-model="dialogform.commoditybar"
                  placeholder="请输入商品编码"
                  style="width: 250px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="数量"
                :label-width="formLabelWidth"
                prop="qty"
              >
                <el-input
                  v-model="dialogform.qty"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="115px">
                <el-button type="primary" @click="Inventory">盘点</el-button>
                <el-button type="danger" @click="clear">清除</el-button>
                <el-button type="warning" @click="InventoryOver"
                  >盘点结束</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <!-- 模态框表格 -->
          <div>
            <el-table :data="dialogData" border>
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                property="locatorcode"
                label="盘点货位编码"
              ></el-table-column>
              <el-table-column
                property="commodityname"
                label="商品名称"
              ></el-table-column>
              <el-table-column
                property="commoditybar"
                label="商品编码"
              ></el-table-column>
              <el-table-column property="qty" label="数量"></el-table-column>
              <el-table-column
                property="creator"
                label="盘点人"
              ></el-table-column>
              <el-table-column
                property="createtime"
                label="盘点时间"
              ></el-table-column>
            </el-table>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        locatorcode: "",
        locatorname: "",
      }, //查询表单参数

      rules: {
        locatorcode: [
          { required: true, message: "货位编码不能为空", trigger: "change" },
        ],
        commoditybar: [
          { required: true, message: "商品编码不能为空", trigger: "change" },
        ],
        qty: [{ required: true, message: "数量不能为空", trigger: "change" }],
      },

      input: [],

      inventoryData: [
        { locatorcode: 13214 },
        { locatorcode: 13215 },
        { locatorcode: 13216 },
        { locatorcode: 13217 },
      ], //上架表格数据
      multipleSelection: [],

      currentPage: 1,
      pagesize: 10,
      total: 0,

      dialogData: [], //模态框表格数据

      dialogVisible: false,

      dialogform: {
        inventoryno: "",
        commoditybar: "",
        qty: "",
        locatorcode: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    onSearch() {
      console.log("submit!");
    }, //查询方法

    onReset() {
      this.$refs.searchForm.resetFields();
    }, // 重置表单

    onInventory() {
      this.dialogVisible = true;
      var date = new Date();
      this.dialogform.inventoryno =
        "IN" +
        date.getFullYear() +
        (date.getMonth()+1) +
        date.getDate() +
        date.getHours() +
        date.getMinutes() +
        date.getSeconds()+
        date.getMilliseconds();
    }, //上架

    onInventoryAll() {}, //上架所有

    clear() {
      this.$refs.dialogform.resetFields();
    }, //重置模态框中表单的内容

    Inventory() {}, //模态框内盘点

    InventoryOver() {}, //盘点所有

    //复选框内容
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var list = new Array();
      for (var i = 0; i < this.multipleSelection.length; i++) {
        list.push(this.multipleSelection[i].locatorcode);
      }
      this.input = list; //获取所有选中的货位编码
    },

    //当每页显示的条数改变时执行该方法
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.onSearch();
    },
    //当前页码变化时执行该方法
    handleCurrentChange: function (page) {
      this.currentPage = page;
      this.onSearch();
    },
  },
};
</script>

<style scoped>
</style>